<template>
	<div>
		<!-- 搜索新增批量删除栏console -->
		<div class="btndel">
					<div>
						<a-input-search placeholder="输入姓名" :loading="tableLoading" enter-button @search="onSearch"   />
					</div>
					<div class="flex_f flex_row">
						<a-button icon="plus" type="primary"   @click='addBtn()' >新增</a-button>
						<a-button icon="right-circle" type="text" >选中{{delList.length}}项</a-button>
						<a-button icon="close" type="danger"   @click='delAllBtn()' :disabled="isFlag">批量删除</a-button>
					</div>
				</div>
				<!-- 表格 -->
		<a-table size="small" :scroll="{ x: 900 }"  :row-selection="rowSelection" :loading="tableLoading" :columns="columns" :data-source="data" row-key="id" :pagination="pagination">
			<!-- <span slot="title" style="color: red">NAME</span> -->
			<span slot="type" slot-scope="row">
				<a-tag :color="row === '股票' ? 'green' : row == '基金' ? 'red' : row == '黄金'?'yellow': 'blue'"> {{ row }}
				</a-tag>
			</span>
			<template slot="action" slot-scope="row">
				<div  class="flex_row">
					<a-button icon="close" type="danger" @click="delBtn(row)">删除</a-button>
				<a-button icon="edit" type="primary" @click="editBtn(row)" style="margin-left:20px">修改</a-button>
				</div>
				
			</template>
		</a-table>
		<!-- 新增框 -->
		 <a-modal
			class="e_dia"
			:title="titleName"
			 style="top: 5px;"
			okText="确定"
			cancelText="取消"
			:visible="addFormShow"
			@ok="() => submitBtn()"
			@cancel="() => addFormShow=false"
			>
			 <a-form-model class="mar_bto" :model="addform" ref="addRuleForm" :rules="addRules" :label-col="labelCol" :wrapper-col="wrapperCol">
				<a-form-model-item label="用户名" prop="username">
					<a-input v-model="addform.username" />
				</a-form-model-item>
				<a-form-model-item label="工资" prop="pay" >
					<a-input v-model="addform.pay" />
				</a-form-model-item>
				<a-form-model-item label="今日收益" prop="income">
					<a-input v-model="addform.income"  />
				</a-form-model-item>
				<a-form-model-item label="累计收益" prop="accoutCash">
					<a-input v-model="addform.accoutCash"  />
				</a-form-model-item>
				<a-form-model-item label="买入类型" prop="type">
					<a-select v-model="addform.type">
						<a-select-option v-for="(item,index) in typeList" :key="index" :value="item">
							{{item}}
						</a-select-option>
					</a-select>
				</a-form-model-item>
				<a-form-model-item label="买入地址" prop="address">
					<a-input v-model="addform.address"  />
				</a-form-model-item>
				<a-form-model-item label="付款方式" prop="incomePayType">
					<a-input v-model="addform.incomePayType"  />
				</a-form-model-item>
			</a-form-model>

   		 </a-modal>
	</div>
</template>
<script lang="ts">
	import 'ant-design-vue/lib/tag/style/index.css';
	import 'ant-design-vue/lib/select/style/index.css';
	import 'ant-design-vue/lib/table/style/index.css';
	import 'ant-design-vue/lib/input/style/index.css';
	import 'ant-design-vue/lib/pagination/style/index.css';
	import 'ant-design-vue/lib/button/style/index.css';
	import 'ant-design-vue/lib/form/style/index.css';
	import 'ant-design-vue/lib/form-model/style/index.css';
	import {Tag,Select,Table,Input,Pagination,Button,Form,FormModel} from 'ant-design-vue'
	import axios from "ts-axios-new";
import { Component, Prop, Vue,Watch } from "vue-property-decorator";
import headerList from "@/layout/headerList.vue";
import { getTableDataApi,addTableDataApi,editTableDataApi,delTableDataApi,delAllTableDataApi } from "@/api/tableAPI.ts"

@Component({
  components: {
	  aTag:Tag,
	  aSelect:Select,
	  aSelectOption:Select.Option,
	  aTable:Table,
	  aInput:Input,
	  aInputSearch:Input.Search,
	  aPagination:Pagination,
	  aButton:Button,
	  aForm:Form,
	  aFormModel:FormModel,
	  aFormModelItem:FormModel.Item,
    headerList,
  },
})
export default class tsTable extends Vue {
    private data:string [] = [];
    private tableLoading: boolean = false;
    private columns: any[] =  [{
			title: '姓名',
			dataIndex: 'username',
			key: 'username 1',
			width:70,
			},
			{
			title: '工资',
			align: "center",
			ellipsis: true,
			dataIndex: 'pay',
			filtered: true,
			key: 'id 7',
			width:70,
			sorter: (a:any, b:any) => a.pay - b.pay,
		},
		{
			title: '今日收益',
			dataIndex: 'income',
			key: 'income 2',
			width:100,
			align: "center",
			sorter: (a:any, b:any) => a.income - b.income,
			// ellipsis: true,
		},
		{
			title: '累计收益',
			dataIndex: 'accoutCash',
			key: 'accoutCash 3',
			align: "center",
			width:100,
			sorter: (a:any, b:any) => a.accoutCash - b.accoutCash,
		},
		{
			title: '类型',
			dataIndex: 'type',
			key: 'type',
			align: "center",
			width:80,
			filters: [  
				{ text: '股票',  value: '股票'},
				{text: '基金',value: '基金'},
				{text: '黄金',value: '黄金'},
				{text: '买房',value: '买房'}],
			onFilter: (value:any, record:any) => record.type.indexOf(value) === 0,
				
			scopedSlots: { customRender: 'type' },
		},
		{
			title: '买入地址',
			dataIndex: 'address',
			key: 'address 5',
			align: "center",
			ellipsis: true,
		},
		{
			title: '出生时间',
			dataIndex: 'createTime',
			key: 'createTime 6',
			ellipsis: true,
			align: "center",
		},
		{
			title: '操作',
			key: 'action',
			align: "center",
			scopedSlots: { customRender: 'action'},
			width:200
		},
    ];
    private searchVal: string = '';
    private pagination:any = {
					pageSize: 5,
					current: 1,
					total:0,
					showSizeChanger: true, // 显示可改变每页数量123
					pageSizeOptions: ["5","10", "20", "50", "100"], // 每页数量选项123
					showTotal: (total:any) => `共${total}条`, // 显示总数
					onShowSizeChange: (current:any, pageSize:any) => this.onShowSizeChange(current, pageSize),
					onChange:this.onPageChange.bind(this), //点击页码事件
					buildOptionrow:(pageSizeOptions:any) => `${pageSizeOptions.value}条/页`,
                };
    private delList:any[] = [];
    private isFlag:boolean = true
    private titleName:string = "新增"
    private addFormShow:boolean = false
    private labelCol:any = { span: 6 };
    private wrapperCol:any = { span: 14 };
    private typeList:any[] = ['股票', '基金', '黄金', '买房']
    private addform:any = {
					username:null,
					address:null,
					income:null,
					pay:null,
					accoutCash:null,
					incomePayType:null,
				};
    private addRules:any={
					 username: [{ required: true, message: '请输入用户名', trigger: 'blur' },
					           { min: 1, max: 5, message: '用户名长度为3-5个字', trigger: 'blur' } ],
					address:[{ required: true, message: '请输入家庭住址', trigger: 'blur' }],
					income:[{ required: true, message: '请输入今日收益', trigger: 'blur' }],
					pay:[{ required: true, message: '请输入工资', trigger: 'blur' }],
					type:[{ required: true, message: '请选择买入类型', trigger: 'blur' }],
					accoutCash:[{ required: true, message: '请输入累计收益', trigger: 'blur' }],
					incomePayType:[{ required: true, message: '请输入付款方式', trigger: 'blur' }],
				};
    private onSearch(val:any):void{
				this.searchVal = val
			};
	private	onPageChange(page:any):void{
				this.pagination.current = page
				this.getData()
			};
    private onShowSizeChange(current:any, pageSize:any):void {
					this.pagination.current = 1
				this.pagination.pageSize = pageSize
				this.getData()
				// console.log(this.pagination.pageSize,"this.pageSize");
			};
    private getData():void {
                this.tableLoading = true
               // console.log(this.searchVal,777)
				var dd = {
					endTime: "",
					limit: this.pagination.pageSize,
					name: this.searchVal,
					page: this.pagination.current,
					startTime: "",
				}
				getTableDataApi(dd).then((res:any) => {
					// console.log(res)
					if(res.code == 200){
						this.tableLoading = false
						const data = res.data;
						this.data = data.moneyList;
						this.pagination.total = data.total
					}
				}).catch((err:any)=>{
					console.log(err)
				})
			};
    private delBtn(val:any):void {
				var _this = this
				 this.$confirm( {
					 okType: 'danger',
					 content: '确认删除该记录吗',
					  onOk() {
						delTableDataApi( {id:val.id}).then((res:any) => {
							if(res.code == 200){
								_this.getData()
							}
						}).catch((err:any)=>{
							console.log(err)
						})
					  },
					   onCancel() {
						console.log('已取消');
						},
                })
               
			};
    private	delAllBtn():void{
				var _this = this
				const rowIds:any = []
				  this.delList.forEach((item) => {
					rowIds.push(item.id);
					});
				const ids = rowIds.toString()
				 this.$confirm( {
					 okType: 'danger',
					 content: '确认批量删除该记录吗',
					  onOk() {
						delAllTableDataApi({ids}).then((res:any) => {
							if(res.code = 200){
								_this.getData()
								_this.delList = []
								_this.isFlag = true
							}
						}).catch((err:any)=>{
							console.log(err)
						})
					  },
					   onCancel() {
						console.log('已取消');
						},
                })
			};
    private addBtn():void{
				this.titleName="新增"
				this.addFormShow = true
				this.addform = {}
				if(this.$refs.addRuleForm !== undefined){
					let el:any = this.$refs.addRuleForm;
				el.resetFields();
				}
			};
    private editBtn(row:any):void{
				this.titleName = "编辑"
				this.addFormShow = true
				this.addform = JSON.parse(JSON.stringify(row))
				this.$nextTick(() => {
					let el:any = this.$refs.addRuleForm;
				el.clearValidate()
				})
			};
    
    private submitAddBtn():void{
					addTableDataApi(this.addform).then((res:any) => {
						if(res.code = 200){
						// this.$refs.addRuleForm.resetFields();
							const data = res.data;
							this.addFormShow = false
								this.$message.success( data.message, 2);
							this.getData()

						}
					}).catch((err:any)=>{
						console.log(err)
					})
			};
    private submitEditBtn():void{
					editTableDataApi(this.addform).then((res:any) => {
						if(res.code = 200){
							let el:any = this.$refs.addRuleForm;
						el.resetFields();
							const data = res.data;
							this.addFormShow = false
								this.$message.success( data.message, 2);
							this.getData()
						}
					}).catch((err:any)=>{
						console.log(err)
					})
            };
    private  mounted() :void{
        this.getData();
    };
    @Watch('searchVal')
	handleWatch(){
		this.getData()
      };
    get rowSelection() {
				return {
					onChange: (selectedRowKeys:any, selectedRows:any) => {
						this.delList = selectedRows
						if (selectedRows.length>0) {
							this.isFlag = false
						} else {
							this.isFlag = true
						}
					},
				};
            };
    private submitBtn():void{
				let el:any = this.$refs.addRuleForm;
				 el.validate((valid:any) => {
					if (valid) {
						if (this.titleName == '新增') {
						this.submitAddBtn()
						} else{
						this.submitEditBtn()
						}
					} else {
						console.log('error submit!!');
						return false;
					}
					});
				
			};





};
  
</script>

<style lang="less" scoped>
	 .btndel{
		display: flex;
		justify-content: space-between;
		padding: 5px 20px;
		.bjys;
		margin-bottom: 20px;
		border: #ededed 1px solid;
		.flex_f{
			button{
				margin-right: 10px;
			}
		}
  }
  
  .e_dia{
	  /deep/.ant-modal{
	  position: relative;
	      top: 50px;
  }
	  /deep/ .ant-modal-body{
		  padding:5px 24px;
		  .mar_bto{
		  .ant-form-item{
			      margin-bottom: 12px;
				 /deep/ .ant-form-explain{
					  font-size: 10px;
					  position: absolute;
				  }
		  }
	  }
	  }
	  
  }
  .flex_row{
	  .flex_row(row);
  }
</style>
